<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-13 09:58:43
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-24 11:18:31
-->
<template>
    <div class="container">
        <div class="count">
            <div class="title select" @click="goListPage">整机销售（台）</div>
            <year @emit="getYear"></year>
            <div class="line select">|</div>
            <model
                @emit="getModel"
                :modelList="$store.getters['xiaoshou/modelList']"
            ></model>
        </div>
        <div class="totalCount" :style="{ fontSize: computedFont + 'px' }">
            <div
                v-for="(item, index) in totCount"
                :key="index"
                :class="item != ',' ? 'addBg' : ''"
            >
                <div :style="{ color: item == ',' ? '#0045e7' : '' }">
                    {{ item }}
                </div>
            </div>
        </div>
        <div id="earthMapXs" ref="earthMapXs"></div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    PropType,
    reactive,
    toRefs,
    ref,
    computed,
    nextTick,
    onMounted,
} from "vue";
import { useRouter } from "vue-router";
import { Sales } from "@/http";
import { type } from "@/http/interface";
import * as echarts from "echarts";
import { Model, Year } from "@/components";
import dateJs from "dayjs";
// const china = require('@/common/china.json');
import china from "@/common/china.json";

export default defineComponent({
    name: "earthMapXs",
    components: { Year, Model },
    props: {},
    setup() {
        const router = useRouter();
        const earthMapXs = ref<HTMLDivElement | null>(null);
        const state = reactive({
            totCount: "",
            chartList: [] as any,
            modelType: "",
            startYear: "",
            endYear: "",
        });
        const computedFont = computed(() => {
            return state.totCount.length > 9 ? "30" : "60";
        });
        const getYear = (v) => {
            state.startYear = v.startYear;
            state.endYear = v.endYear;
            getData();
        };
        const getModel = (v) => {
            state.modelType = v;
            getData();
        };
        onMounted(() => {
            // state.startYear = new Date().getFullYear().toString();
            // state.endYear = dateJs(state.startYear).add(1, 'year')['$y'];
            getData();
        });

        const getData = () => {
            const formList = {
                jx: state.modelType == "全部" ? "" : state.modelType,
                startTime: state.startYear ? state.startYear + "-" + "01" : "",
                endTime: state.endYear ? state.endYear + "-" + "01" : "",
            } as type.sales_GetSalesReq;
            Sales.GetSales(formList).then((res) => {
                state.totCount = dealNum(res.total);
                (res as any).data.forEach((item) => {
                    state.chartList.push({
                        name: item.arg1
                            .replace("省", "")
                            .replace("市", "")
                            .replace("内蒙", "内蒙古"),
                        value: item.val1,
                        childs: item.childs,
                    });
                });
                if (state.chartList.length == 0) return;
                nextTick(() => {
                    draw(state.chartList);
                });
            });
        };
        /**处理总数 */
        function dealNum(num) {
            var b = parseInt(num).toString() as any;
            var len = b.length;
            if (len <= 3) {
                return b;
            }
            var r = len % 3;
            return r > 0
                ? b.slice(0, r) +
                      "," +
                      b.slice(r, len).match(/\d{3}/g).join(",")
                : b.slice(r, len).match(/\d{3}/g).join(",");
        }
        const goListPage = () => {
            router.push("/xsTable");
        };

        const draw = (data) => {
            var option = {
                tooltip: {
                    trigger: "item",
                    icon: "query",
                    formatter: function (e, t, n) {
                        let string = "";
                        string += `<div style="padding:10px"><span style="padding-right:10px">${
                            e.name
                        }</span><span style="font-size:11px">(${
                            e.value ? e.value : ""
                        }  台)</span> </div>`;
                        let childList = e.data ? e.data.childs : [];
                        childList.forEach((item) => {
                            string += `<div style="padding:0 10px 5px 10px;display:flex;justify-content: space-between;"><div style="padding-right:20px">${item.arg1}</div><div>${item.val1}台</div></div>`;
                        });
                        return string;
                    },
                    fontSize: "12px",
                    backgroundColor: "#fff", //设置背景图片 rgba格式
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "rgba(9,229,237,.2)", //设置边框颜色
                    textStyle: {
                        color: "#000", //设置文字颜色
                    },
                    extraCssText: "box-shadow: 0px 0px 20px inset #09E5ED",
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    // top:'10%',
                    containLabel: true,
                },
                visualMap: {
                    min: 0,
                    max: 1000,
                    left: 0,
                    bottom: 0,
                    showLabel: !0,
                    text: ["高", "低"],
                    // inRange: {
                    //     color: ['#52f8fd', '#4bd3f9', '#62b7e7','#7863fc']
                    // },
                    pieces: [
                        {
                            gt: 4000,
                            color: "#7863fc",
                        },
                        {
                            gte: 3000,
                            lte: 4000,
                            color: "#6699f9",
                        },
                        {
                            gte: 2000,
                            lt: 3000,
                            color: "#62b7e7",
                        },
                        {
                            gt: 1000,
                            lt: 2000,
                            color: "#4bd3f9",
                        },
                        {
                            gt: 0,
                            lt: 1000,
                            color: "#52f8fd",
                        },
                        {
                            value: 0,
                            color: "#52f8fd",
                        },
                    ],
                    show: false,
                },
                geo: {
                    map: "china",
                    // roam: true, // 是否可以缩放、拖拽
                    scaleLimit: {
                        min: 1,
                        max: 2,
                    },
                    zoom: 1.23,
                    label: {
                        normal: {
                            show: true,
                            fontSize: "10",
                            color: "#fff",
                        },
                    },
                    itemStyle: {
                        normal: {
                            // areaColor: "red",
                            shadowColor: "#0d82dc",
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                            borderColor: "transparent",
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: "#107889",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                        },
                    },
                },
                series: [
                    {
                        name: "整机销售台数 (台)",
                        type: "map",
                        geoIndex: 0,
                        data: data,
                    },
                ],
            };
            echarts.registerMap("china", china);
            let myChart = echarts.init(
                document.getElementById("earthMapXs") as HTMLElement
            );
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            myChart.setOption(option);
        };
        return {
            ...toRefs(state),
            computedFont,
            getYear,
            getModel,
            earthMapXs,
            goListPage,
        };
    },
});
</script>

<style lang="scss" scoped>
.container {
    .count {
        width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        .title {
            margin-right: auto;
        }
        .lf {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0.12px;
        }
        .rt {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #ffffff;
            letter-spacing: 0;
            line-height: 12px;
            width: 50px;
        }
        .line {
            margin: 0 10px 0 15px;
        }
    }
    #earthMapXs {
        margin: 20px;
        width: calc(100%-40px);
        height: 300px;
    }
}
</style>
